{extend name="common"}
{block name="content"}
	
	<div class="index-container">
		<div class="search-filter"><!--筛选按钮-->
			<div class="search-item">
			    <div>全部</div>
			    <div class="icon-down"><img src="/static/images/sort-2.png" alt=""></div>
			    <div class="icon-up" style="display: none;"><img src="/static/images/sort-1.png" alt=""></div>
			</div>

			<div class="search-item">
			    <div>智能排序</div> 
			    <div class="icon-down"><img src="/static/images/sort-2.png" alt=""></div>
			    <div class="icon-up" style="display: none;"><img src="/static/images/sort-1.png" alt=""></div>
			</div>
			<div class="search-item">
			    <div class="text">筛选</div>
			    <div class="icon-down"><img src="/static/images/sort-2.png" alt=""></div>
			    <div class="icon-up" style="display: none;"><img src="/static/images/sort-1.png" alt=""></div>
			</div>
		</div>

		<div class="activity-header"><!--显示过滤条件-->

			<div class="filter-item-list"><!--活动栏目-->
				<div class="category-item">
				    <img src="/static/images/match.png">
				    <div class="item-name">赛事</div>
				</div>
				<div class="category-item">
					<img src="/static/images/play.png">
					<div class="item-name">演出</div>
				</div>
				<div class="category-item">
				    <img src="/static/images/movie.png" alt="">
				    <div class="item-name">电影</div>
				</div>
				<div class="category-item">
				    <img src="/static/images/exibition.png" alt="">
				    <div class="item-name">展览</div>
				</div>
				<div class="category-item">
				    <img src="/static/images/parent.png" alt="">
				    <div class="item-name">亲子</div>
				</div>
		    </div>

		    <div class="filter-item-list wrap" style="display: none">
		    	<!-- <div class="filter-item"><span>赛事</span></div>
		    	<div class="filter-item"><span>演出</span></div>
		    	<div class="filter-item"><span>电影</span></div>
		    	<div class="filter-item"><span>展览</span></div>
		    	<div class="filter-item"><span>亲子</span></div> -->
		    	{foreach $activity_categories as $v}
		    		<div class="filter-item"><a {if $v->id == request()->param('category_id')} class="active" {/if} href="{:url('index/activity/lists',array_merge(request()->param(), ['category_id' => $v->id]))}">{$v->name}</a></div>
		    	{/foreach}
		    	<div class="filter-item"></div>
		    </div>
		    <div class="filter-item-list wrap" style="display: none">
				<div class="filter-item"><span>离我最近</span></div>
				<div class="filter-item"><span>人气</span></div>
				<div class="filter-item"><span>最新</span></div>
		    </div>
		    <div class="filter-item-list wrap" style="display: none">
				<div class="filter-item"><span>免费</span></div>
				<div class="filter-item"><span>付费</span></div>
				<div class="filter-item"><span>积分优惠</span></div>
		    </div>
		</div>
		{foreach $datas as $v}
			<div class="activity-list">
				<div class="cover"><!--左侧封面图片-->
					<img src="/static/uploads/{$v->cover}" alt="">
				</div>
				<div class="activity-info"><!--右侧介绍-->
					<div class="activity-title">{$v->title}</div><!--标题-->
					<div class="activity-detail">
						<div>类别:{$v->getType()}</div>
						{if !empty($v->actor)}<div>明星:{$v->actor}</div>{/if}
						<div>场馆:{$v->venues}</div>
						<div>时间:{$v->begin_time}</div>
						<div>票价:{$v->fare}元起</div>
					</div><!--活动信息-->
					<div class="buy-button">立即购买</div><!--购票按钮-->
				</div>
			</div>
			<div class="split"></div>
		{/foreach}
	</div>
	<script>
		$(function(){
			$(".icon-down").on('click', function(){
				let _index = $(this).parent().index();
				//console.log(_index);
				let eq = _index + 1;
				$(this).parent().siblings().find('.icon-up').hide();
				$(this).parent().siblings().find('.icon-down').show();
				$(".filter-item-list").eq(eq).show().siblings().hide();
				$(this).hide().next().show();
			});

			$(".icon-up").on('click', function(){
				$(".filter-item-list").eq(0).show().siblings().hide();
				$(this).hide().prev().show();

			});
		});
	</script>
{/block}